<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .finished{
            color: red;
            text-decoration: line-through;
        }
        .btnStyle{
            color: red;
        }
        li{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- todulist 步骤细化版 -->
    <div id="app">
        <!-- 首先搭静态 -->
        <h1>todulist_vue版本</h1>
        <label  >
            <!-- 2.编写添加功能 -->
            <!-- 2.首先我们要将input框双向绑定一个值 -->
            <!-- 2.给按钮点击事件 然后点击就添加数据 -->
            添加内容<input type="text" v-model="inputData">
        </label>
        <button @click="add">添加</button>
        <!--1. 首先我们的li应该是数组循环出来的 -->
        <!--1. 应该在data里面声明出来 -->
        <ul>
            <!-- 3.数据有两种状态 一种是已完成(有样式)  还有一种未完成(没有样式)-->
            <!-- 3.既然有两种状态 数据类型应该是复杂数据类型 -->
            <!-- 4.既然有状态了，是不是应该v-bind动态绑定我们的css -->
            <!-- 5.点击数据的时候切换它的完成状态 -->
            <!-- 5.是不是该给li点击事件 -->
            <!-- 10.我们已经获取到状态了 是不是可以根据这个状态来判断显示哪些li -->
            <!-- 10.这里需要频繁的切换 所以我推荐用v-showss -->
            <li 
                v-for="(item, index) in list" 
                :class="item.status ? 'finished' : ''"
                @click="changeStatus(index)"
                :key="index"
                v-show="show(item.status)"
                >
                {{ item.name }}
            </li>
        </ul>
        <div>
            <!-- 6.按钮也是两种状态 选中时是红色的 没选中时没有样式 -->
            <!-- 6.所以这里我们是不是也应该声明一个复杂类型的数组去循环？ -->
            <!-- 7.状态不同显示样式不同 -->
            <!-- 7.同样，这里也应该去动态绑定我们的css -->
            <!-- 8.点击按钮的时候切换状态来改变谁显示红色这个样式 -->
            <button 
                v-for="(item, index) in btnList" 
                :class="item.btnStatus ? 'btnStyle' : '' "
                @click="changeBtn(index)"
                >
                {{ item.btnName }}
            </button>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    // list:['吃饭','睡觉','打豆豆'],
                    // 3.既然都改了数据格式了，我们是不是应该再去修改一下添加和渲染时都数据
                    list:[
                        {
                            name:'吃饭',
                            status:true
                        },
                        {
                            name:'睡觉',
                            status:false
                        },
                        {
                            name:'打豆豆',
                            status:false
                        },
                    ],
                    inputData:'',
                    btnList:[
                        {
                            btnName:'全部',
                            btnStatus:true
                        },
                        {
                            btnName:'已完成',
                            btnStatus:false
                        },
                        {
                            btnName:'未完成',
                            btnStatus:false
                        },
                    ],
                    // 9.既然按钮有三个，也就是说我们的展示样式就有三个
                    // 9.那么我们可以声明一个变量来装它
                    dataStatus:'all', //all-全部 finished-已完成 unfinished-未完成
                }
            },
            // 需要写这个方法
            methods:{
                add(){
                    // 2.添加以后应该清除掉数据
                    // 2.还要判断不可以添加空值
                    // 3.这里添加是不是也应该添加成一个类型一样的对象
                    if(this.inputData.length > 0 ){
                        this.list.push({
                            name:this.inputData,//name应该是this.inputData 输入框里面的值
                            status:false
                        })
                    }
                    this.inputData = ''
                },
                changeStatus(i){
                    // 5.我们要知道我们点的是哪一个数据 所以是不是应该传一个index索引值
                    // 5.拿到索引值以后，我们就可以去改变点击的数据的状态了
                    this.list[i].status = !this.list[i].status
                },
                changeBtn(i){
                    // 8.我们也要知道点击的是哪一个按钮 所以我们是不是也需要一个index索引值
                    // 8.点击的按钮的状态改变为true
                    // 8.我们还要把所有的默认值先改为false 避免有两个true甚至更多的true
                    // 9.我们在点击按钮的时候，是不是就应该将this.dataStatus的值改变
                    // 9.然后通过这个值去判断我们需要显示的是那些数据
                    this.btnList.map(item => item.btnStatus = false)
                    if( i === 0 ){
                        this.dataStatus = 'all'
                    } else if(i === 1){
                        this.dataStatus = 'finished'
                    }else{
                        this.dataStatus = 'unfinished'
                    }
                    this.btnList[i].btnStatus = true
                },
                show(status){  
                    return this.dataStatus === 'all' ? true : this.dataStatus === 'finished'? status : !status
                    // if(this.dataStatus === 'all'){
                    //     return true
                    // }else if(this.dataStatus === 'finished'){
                    //     if(status){
                    //         return true
                    //     }
                    // }else{
                    //     if(!status){
                    //         return true
                    //     }
                    // }
                }
            }
        })
    </script>
</body>
</html>